<template>
  <!-- <el-breadcrumb separator="/"> -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <!-- :to="item.path" -->
    <el-breadcrumb-item v-for="(item, index) in crumbs" :key="index">{{
      item.name
    }}</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'
import useRoutesStore from '@/stores/routes'
import { menuToCrumbs } from '../ts/crumbs.ts'
const route = useRoute()
const menuList = useRoutesStore().menuList
const crumbs = computed(() => {
  return menuToCrumbs(route.path, menuList)
})
</script>

<style lang="scss" scoped></style>
